<template>
  <div class="userinfo_pages">
    <cp-nav-bar title="好友信息" left-arrow></cp-nav-bar>
    <van-cell-group>
      <van-cell title="好友头像">
        <van-image :src="userInfo?.avatar" radius="5px" width="50px" height="50px"></van-image>
      </van-cell>
      <van-cell title="昵称" :value="userInfo?.username"></van-cell>
      <van-cell title="签名" :value="userInfo?.signature"></van-cell>
      <van-cell title="注册时间" :value="formatTime(userInfo?.regist_time)"></van-cell>
    </van-cell-group>

    <button class="delete-friend-btn" @click="deleteFriend">删除好友</button>
  </div>
</template>
<script setup lang="ts">
import { getFriendUserInfo, deleteFriendUser } from '@/services/friend'
import { formatTime } from '@/utils/format'
import { showConfirmDialog, showToast } from 'vant'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const userInfo = ref()
const route = useRoute()
const router = useRouter()
const getInfo = async () => {
  const friendId = route.params.id as string
  const res = await getFriendUserInfo(friendId)
  userInfo.value = res.data
}
getInfo()
const deleteFriend = () => {
  showConfirmDialog({
    title: '是否删除好友'
  })
    .then(async () => {
      // on confirm
      await deleteFriendUser(route.params.id as string)
      showToast('删除成功')
      router.push('/home')
    })
    .catch(() => {
      // on cancel
    })
}
</script>
<style lang="scss" scoped>
.userinfo_pages {
  padding-top: 40px;
  height: 100vh;
  box-sizing: border-box;
  background-color: var(--bg-primary);
}
.delete-friend-btn {
  color: red;
  width: 100%;
  border: none;
  text-align: center;
  background-color: var(--bg-primary);
  margin-top: 30px;
}
</style>
